import React, { useEffect, useState } from 'react'
import './Cate.less';
import Header from '../../components/Header/Header'
import { SideBar } from 'antd-mobile'
import { reqgetcate, reqgetgoods } from '../../http/api'
import { $pre } from '../../http/http';
import { Link } from 'react-router-dom';
export default function Cate() {
  let [cateList, setCateList] = useState([]);
  let [goodsList, setGoodsList] = useState([]);
  let [fid, setFid] = useState('');
  let getCateList = async () => {
    let { data: res } = await reqgetcate();
    if (res.code === 200) {
      console.log('cate',res);
      let arr = res.list ? res.list : [];
      setFid(arr[0].id);
      setCateList(arr);
    }
  }
  let getGoodsList = async () => {
    let { data:res } = await reqgetgoods({ fid });
    if (res.code === 200) {
      console.log('goods',res);
      let arr = res.list ? res.list : [];
      setGoodsList(arr);
    }
  }
  useEffect(() => {
    getCateList();
  }, [])
  useEffect(()=>{
    getGoodsList()
  },[fid])
  return (
    <div className='cate'>
      <Header back title='分类'></Header>
      <div className="box">
        <div className="sidebar">
          <SideBar onChange={(k) => {
            setFid(k-0);
          }} activeKey={fid + ''}>
            {cateList.length > 0 ? cateList.map(item => (
              <SideBar.Item key={item.id} title={item.catename} />
            )) : (<div>暂无数据</div>)}
          </SideBar>
        </div>
        <div className="list">
          {goodsList.length > 0 ? goodsList.map(item => (<Link to={`/detail/${item.id}/1`} className="item" key={item.id}>
            <img src={$pre + item.img} alt="" />
            <div className="right">
              <h3>商品名称：{item.goodsname}</h3>
              <div>价格：{item.price}</div>
            </div>
          </Link>)) : (<div>暂无数据</div>)}
        </div>
      </div>
    </div>
  )
}
